<template>
  <el-card class="box-card" shadow="hover">
    <FontSizeAdaptor/>
    <div slot="header" class="header">
      <span class="header_title">抄回数\抄回率统计</span>
      <el-radio-group v-model="dataValue" style="float: right;bottom: 5px; " size="mini" @change="radioChange">
        <el-radio-button :label="7">7天</el-radio-button>
        <el-radio-button :label="30">30天</el-radio-button>
      </el-radio-group>
    </div>
    <div ref="main" id="main"></div>
  </el-card>
</template>

<script>
import {homepageCopyDataForXb} from '@/api/index/meteread.js'
import * as echarts from 'echarts';

require('echarts/theme/macarons')
import {histogramEchartSetting} from "./histogramsetting";
import FontSizeAdaptor from "../../../components/FontSizeAdaptor/FontSizeAdaptor.vue";

export default {
  name: "ReadingRateEcharts",
  components: {FontSizeAdaptor},
  data() {
    return {
      dataValue: 7,
      chartExtend: histogramEchartSetting,
      dataList: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 监听单选框改变事件
    radioChange(value) {
      this.resetEchart()
      this.dataValue = value
      this.getList()
    },
    // 获取数据
    getList() {
      homepageCopyDataForXb({days: this.dataValue}).then(response => {
        if (response.code === 200) {
          this.dataList = response.data.copyData
          this.renderChart(this.dataList)
        }
      })
    },
    // 处理数据
    renderChart(res) {
      let seriesListOne = []
      let seriesListTwo = []
      let xAxisList = []
      this.chartExtend.legend.data = []
      this.chartExtend.yAxis = [{
        type: 'value',
        name: '抄回数',
        position: 'left',
        axisLabel: {
          formatter: '{value} 台'
        }
      }, {
        type: 'value',
        name: '抄回率',
        position: 'right',
        axisLabel: {
          formatter: '{value} %'
        }
      }]
      res.forEach(item => {
        if(item.copyCount == null){
          item.copyCount = ''
        }else if(item.copyRate == null) {
          item.copyRate = ''
        }
        seriesListOne.push([item.date, item.copyCount])
        seriesListTwo.push([item.date, (item.copyRate * 100).toFixed(2)])
        xAxisList.push(item.date)
        xAxisList.sort((a, b) => {
          return Date.parse(a) - Date.parse(b)
        })
        this.chartExtend.series = [{
          name: '抄回数',
          type: 'bar',
          barWidth: '40%',
          data: seriesListOne,
          animationDuration: 2000,
          animationEasing: 'quarticln',
          itemStyle: {
            // borderRadius: 10,
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: '#5C87E5' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#47F4FF' // 100% 处的颜色
                }
              ]
            },
          },
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 台';
            }
          },
        }, {
          name: '抄回率',
          type: 'line',
          barWidth: '40%',
          yAxisIndex: 1,
          smooth: true,
          data: seriesListTwo,
          animationDuration: 2000,
          animationEasing: 'quarticln',
          itemStyle: {
            color: '#F0C238',
          },
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            }
          }
        }]
      })
      this.chartExtend.legend.data = []
      this.chartExtend.xAxis = [
        {
          type: 'category',
          data: xAxisList,
          axisTick: {
            alignWithLabel: true
          }
        }
      ]
      this.initEchart()
    },
    // 初始化图表
    async initEchart() {
      let myChart = echarts.init(this.$refs.main)
      myChart.setOption(this.chartExtend, true)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    // 重置图表
    resetEchart() {
      this.chartExtend = histogramEchartSetting
    }
  },
}
</script>
<style lang="scss" scoped>
#main {
  width: 100%;
  height: 100%;
}

::v-deep .el-card__header {
  padding: 7px 15px 7px 20px !important;
}
//
//.header{
//  display: flex;
//  height: 20px;
//
//}
.header_title{
  border-left: 5px solid #1c84c6;
  padding: 0 0 0 20px;
  font-size: 0.65rem;
  //flex: 1;
}

::v-deep .el-card__body {
  height: 32.5vh !important;
}
</style>
